{% if section.settings.collection.id %}
{% get_collection collections_id={section.settings.collection.id} %}
{% assign collection = collection  %}
{% endif %}

{% stylesheet %}
.block_collection_list .block_collection_product ul {
    display: grid;
    grid-row-gap: 30px;
    grid-column-gap: 30px;
    grid-template-columns: repeat(4, calc(25% - 22.5px));
}

.block_collection_list .block_collection_product li {
    list-style-type: none;
    line-height: 1.4;
}

.block_collection_list .block_collection_product .product_pic {
    margin-bottom: 12px;
    position: relative;
}


.block_collection_list .block_collection_product .product_pic .product_img {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100%;
}

.block_collection_list .block_collection_product .product_pic img {
    max-width: 100%;
}

.block_collection_list .block_collection_product .block_product_name {
    margin-bottom: 5px;
    line-height: 1.5;
}
.block_collection_list .block_collection_product .product_price {
    font-weight: bold;
}

.block_collection_list .block_collection_product .product_oldprice {
    color: #888;
    text-decoration: line-through;
    margin-left: 5px;
    display: inline-block;
    font-weight: normal;
}


.block_collection_list .collection_product_pc_3 ul {
    grid-template-columns: repeat(3, calc(33.3333% - 20px));
}

.block_collection_list .collection_product_pc_4 ul {
    grid-template-columns: repeat(4, calc(25% - 22.5px));
}

.block_collection_list .collection_product_pc_5 ul {
    grid-template-columns: repeat(5, calc(20% - 24px));
}

.block_collection_list .block_collection_product_more {
    margin-top: calc(var(--general_layout_spacing) * 0.5);
    text-align: center;
}

.block_collection_list .block_collection_product_more a {
    margin: 0;
}
@media (max-width: 768px) {
    .block_collection_list .block_collection_product ul{
        grid-template-columns: repeat(3, calc(33.3333% - 20px));
    }
}
@media (max-width: 767px) {
    .block_collection_list .block_collection_product ul {
        grid-row-gap: 20px;
        grid-column-gap: 14px;
        grid-template-columns: repeat(2, calc(50% - 7px));
    }

    .block_collection_list .collection_product_wap_1 ul {
        display: block;
    }

    .block_collection_list .collection_product_wap_1 ul li {
        margin-bottom:20px;
    }

    .block_collection_list .block_collection_product_more {
        margin-top: 30px;
    }
    .block_collection_list .block_collection_product .product_pic{
        margin-bottom: 16px;
    }
}
{% comment %} @media screen and (max-width: 767px) {
    .block_collection_list .discount_tag.label_style_1,
    .block_collection_list .discount_tag.label_style_2,
    .block_collection_list .discount_tag.label_style_3,
    .block_collection_list .discount_tag.label_style_4{
        transform: scale(0.8) translate(20%,-20%);
    }
} {% endcomment %}
{% endstylesheet %}
<div class="block_collection_list"> 
    <div class="{% if section.settings.is_fill %}full_container_wrapper{% else %}container_wrapper{% endif %}">
        {% if section.settings.title != '' or section.settings.detail != '' %}
        <div class="block_title">
            {% if section.settings.title != '' %}<h2>{{ section.settings.title }}</h2>{% endif %}
            {% if section.settings.detail != '' %}<div class="block_detail">{{ section.settings.detail }}</div>{% endif %}
        </div>
        {% endif %}
        <div class="block_collection_product collection_product_pc_{{ section.settings.pc_number }} collection_product_wap_{{ section.settings.wap_number }}">
            <ul>
                {% if section.settings.collection.id %}
                {% get_products collection_id = {section.settings.collection.id} limit = { section.settings.product_number } %}
                {% for product in products %}
                {% include 'collection_product', collection_handle:collection.handle %}
                {% endfor %}
                {% else %}
                {% for i in (1..3) %}
                <li>
                    <div class="product_pic">
                        <a href="javascript:;"><img src="{{ 'empty.png' | public_asset_abs_url }}"></a>
                        {% if product.inventory_tracking %}
                        {% if product.inventory_quantity == "0" %}
                            <div class="soldout">{{ lang.general.sold_out }}</div>
                        {% endif %}
                        {% endif %}
                        <div class="discount_tag {{ theme_config.global.discount_label_style }}"><div class="discount_tag_graphics"></div><div class="discount_tag_name">88% <span>OFF</span></div></div>
                    </div>
                    <div class="block_product_name">
                        <a href="javascript:;">title</a>
                    </div>
                    <div class="product_price general_buying-color">$88.00<span class="product_oldprice general_original-color">$88.00</span></div>
                </li>
                {% endfor %}
                {% endif %}
            </ul>
            {% if section.settings.more_text != ""%}
            <div class="block_collection_product_more"><a class="secondary_btn" href="/collections/{{ collection.handle }}">{{ section.settings.more_text }}</a></div>
            {% endif %}
        </div>
    </div>
</div>
<script type="text/javascript">
    console.log({{collection | json}},'专辑')
    console.log({{products | json}},'专辑商品')
</script>
{% schema %}
{
  "tag": "",
  "class": "block_collection_list",
  "is_global": false,
  "name": {
    "zh_CN": "专辑商品"
  },
  "max_blocks": "20",
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "设置"
      }
    },
    {
      "type": "card_collection",
      "label": {
        "zh_CN": "选择专辑"
      },
      "default": {
        "id": "",
        "title": ""
      },
      "id": "collection"
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "标题"
      },
      "id": "title",
      "default": "New Arrivals"
    },
    {
      "type": "card_text_editor",
      "label": {
        "zh_CN": "简短描述"
      },
      "id": "detail",
      "default": "A sentence or two introducing your brand, what you sell, and what makes your brand compelling to customers."
    },
    {
      "type": "card_switch",
      "label": {
        "zh_CN": "宽度铺满"
      },
      "id": "is_fill"
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "产品总数量"
      },
      "id": "product_number",
      "default": "8"
    },
    {
      "type": "card_slider",
      "label": {
        "zh_CN": "PC每排数量"
      },
      "id": "pc_number",
      "max": "5",
      "min": "3",
      "default": "4"
    },
    {
      "type": "card_slider",
      "label": {
        "zh_CN": "移动端每排数量"
      },
      "id": "wap_number",
      "max": "2",
      "min": "1"
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "查看更多文案"
      },
      "id": "more_text"
    }
  ],
  "blocks": [],
  "default": {
    "settings": {
      "collection": {
        "id": "",
        "handle":"",
        "title": ""
      },
      "title": "New Arrivals",
      "detail": "A sentence or two introducing your brand, what you sell, and what makes your brand compelling to customers.",
      "is_fill": false,
      "product_number": "3",
      "pc_number": "3",
      "wap_number": "2",
      "more_text": ""
    },
    "blocks": []
  }
}
{% endschema %}